<template>
  <div class="parameter-manage">
    <div class="head">
      <div class="input">
        <span>参数名称：</span>
        <el-input v-model="queryData.para_name" placeholder="请输入参数名称" />
      </div>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
      <el-button type="primary" class="btn" @click="add">新增{{ typeName }}</el-button>
    </div>
    
    <el-table
      ref="dataForm"
      :data="tableData"
      border
      v-loading="isTableLoading"
      empty-text="暂无数据"
      style="width: 100%"
      :max-height="tableHeight"
    >
      <el-table-column fixed type="index" align="center" label="序号" width="50" />
      <el-table-column prop="para_name" align="center" label="参数名称" min-width="200" />
      <el-table-column prop="type_name" align="center" label="参数类型" width="120" />
      <el-table-column prop="create_time" align="center" label="创建时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.create_time) }}
        </template>
      </el-table-column>
      <el-table-column prop="update_time" align="center" label="更新时间" width="180">
        <template #default="scope">
          {{ formatTime(scope.row.update_time) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="150">
        <template #default="scope">
          <div class="action">
            <span @click="edit(scope.row)">编辑</span>
            <span @click="del(scope.row)">删除</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <el-pagination
      background
      style="margin-top: 5px; text-align: right"
      @size-change="search"
      @current-change="getList"
      :current-page.sync="queryData.page"
      :page-size.sync="queryData.size"
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
    />

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="ruleForm.id ? '编辑' + typeName : '新增' + typeName"
      :visible.sync="isShowAdd"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="参数名称" prop="para_name">
          <el-input v-model="ruleForm.para_name" placeholder="请输入参数名称" />
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="subLoading" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <span>确定删除该{{ typeName }}吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="delOk">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ParameterPage, ParameterSave, ParameterInfo, ParameterDelete } from '@/api/manage';

export default {
  name: 'ParameterManage',
  props: {
    type: {
      type: Number,
      required: true
    },
    typeName: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableHeight: 500,
      isTableLoading: false,
      subLoading: false,
      dialogVisible: false,
      isShowAdd: false,
      tableData: [],
      total: 0,
      queryData: {
        page: 1,
        size: 10,
        para_name: '',
        type: this.type
      },
      ruleForm: {
        id: null,
        para_name: '',
        type: this.type
      },
      rules: {
        para_name: [
          { required: true, message: '请输入参数名称', trigger: 'blur' }
        ]
      },
      deleteItem: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 300;
    });
    this.getList();
  },
  methods: {
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp * 1000);
      return date.toLocaleString('zh-CN');
    },
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.para_name = '';
      this.search();
    },
    add() {
      this.ruleForm = {
        id: null,
        para_name: '',
        type: this.type
      };
      this.isShowAdd = true;
      this.$nextTick(() => {
        this.$refs['ruleForm'].resetFields();
      });
    },
    edit(item) {
      ParameterInfo({ id: item.id }).then((res) => {
        this.ruleForm = {
          id: res.data.data.id,
          para_name: res.data.data.para_name,
          type: res.data.data.type
        };
        this.isShowAdd = true;
      });
    },
    del(item) {
      this.deleteItem = item;
      this.dialogVisible = true;
    },
    delOk() {
      if (this.deleteItem) {
        ParameterDelete({ id: this.deleteItem.id }).then((res) => {
          this.$message.success('删除成功');
          this.dialogVisible = false;
          this.deleteItem = null;
          this.getList();
        });
      }
    },
    handleClose() {
      this.isShowAdd = false;
      this.ruleForm = {
        id: null,
        para_name: '',
        type: this.type
      };
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.subLoading = true;
          ParameterSave(this.ruleForm).then((res) => {
            this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
            this.subLoading = false;
            this.isShowAdd = false;
            this.getList();
          }).catch(() => {
            this.subLoading = false;
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    getList() {
      this.isTableLoading = true;
      ParameterPage(this.queryData).then((res) => {
        this.isTableLoading = false;
        this.tableData = res.data.list;
        this.total = res.data.total;
      }).catch(() => {
        this.isTableLoading = false;
      });
    }
  }
};
</script>

<style scoped>
.parameter-manage {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 200px);
}

.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.input > span {
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 8px;
}

.btn {
  margin-right: 10px;
}

.action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}

.action span:hover {
  text-decoration: underline;
}
</style> 